<template>
  <header>
    <div class="header-main">
      <div class="header-l">
        <!-- logo -->
        <h1 class="header-l-logo">
          <img src="@/assets/logo.svg" alt="" />
        </h1>
        <!--  导航-->
        <ul class="header-l-nav">
          <!-- <li class="active">首页</li>
          <li>免费课</li>
          <li>实战课</li>
          <li>微博</li>
          <li>会员</li> -->
          <li
            v-for="item in topBar"
            :key="item.id"
            :class="item.id == currentId ? 'active' : ''"
            @click="tarBar(item)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div class="header-r">
        <div class="header-r-search">
          <input type="text" placeholder="请输入搜索的课程" />
          <el-icon :size="18">
            <Search />
          </el-icon>
        </div>
        <div class="header-r-shop">
          <el-icon :size="24" color="">
            <ShoppingCart />
          </el-icon>
        </div>

        <template v-if="true">
          <div class="header-r-login">
            <router-link to="/login" class="link">
              <span class="login">登录</span>
            </router-link>
            <router-link to="/register" class="link">
              <span class="reg">注册</span>
            </router-link>
          </div>
        </template>
        <template v-else>
          <div style="margin-left: 10px; margin-right: 10px">我的课程</div>
          <el-dropdown>
            <span class="el-dropdown-link">
              <img
                src="../../assets/img/chuji.png"
                style="width: 30px; height: 30px; margin-left: 10px"
                alt=""
              />
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>我的课程</el-dropdown-item>
                <el-dropdown-item>订单中心</el-dropdown-item>
                <el-dropdown-item>个人设置</el-dropdown-item>
                <el-dropdown-item>个人中心</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { Search, ShoppingCart } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'

let route = useRoute()

let router = useRouter()

//切换头部class类
let currentId = ref(1)

let topBar = ref([
  { id: 1, title: '首页', name: 'Home' },
  { id: 2, title: '课程', name: 'Course' },
  { id: 3, title: '会员', name: 'Vip' }
])

//点击跳转
const tarBar = (item: any) => {
  currentId.value = item.id
  router.push({ name: item.name, query: { id: 4 } })
}

console.log(router.currentRoute.value.name)
//console.log(route.params, 'route.params')
watch(
  () => router.currentRoute.value.name,
  (toPath) => {
    console.log(toPath)
    if (toPath === 'Home') {
      currentId.value = 1
    } else if (toPath === 'Course') {
      currentId.value = 2
    } else if (toPath === 'Vip') {
      currentId.value = 3
    }
  },
  {
    immediate: true
  }
)
</script>

<style scoped lang="less">
header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 65px;
  background-color: #fff;
  //border-bottom: 1px solid #f3f5f6;
  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.16);
  // 整个头部大盒子
  .header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    // height: 65px;
    height: 100%;
    //头部左侧
    .header-l {
      display: flex;
      justify-content: space-around;
      align-items: center;
      // color: #545c63;
      .header-l-logo {
        width: 127px;
        height: 50px;
        margin-right: 21px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .header-l-nav {
        display: flex;
        font-size: 16px;
        cursor: pointer;
        li {
          color: #545c63;
          margin-right: 36px;
          cursor: pointer;
        }
      }
    }
    //头部右侧
    .header-r {
      display: flex;
      justify-content: center;
      align-items: center;
      .header-r-search {
        width: 300px;
        height: 100%;
        background-color: #f0f2f4;
        //padding: 10px 10px;
        border-radius: 4px;
        display: flex;
        align-items: center;

        input {
          width: 270px;
          height: 36px;
          border: none;
          background-color: transparent;
        }
      }
      .header-r-shop {
        display: flex;
        align-items: center;
        margin-left: 36px;
      }
      .header-r-login {
        margin-left: 30px;
        color: #333;
        display: flex;
        align-items: center;
        font-size: 14px;
        cursor: pointer;

        height: auto;
        .link {
          display: flex;
          align-items: center;
          .reg {
            background: #dd3a5f;
            //  background-color: rgb(109, 40, 210);
            border-radius: 2px;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;
            font-size: 12px;
            height: auto;
            line-height: 26px;
            padding: 0 12px;
            text-align: center;
            margin-left: 10px;
            &:hover {
              background-color: hwb(346 3% 2%);
              opacity: 0.8;
              font-weight: 900;
            }
          }
          .login:hover {
            color: #000;
            font-weight: 900;
          }
        }
      }
    }
  }
}
.active {
  color: #dd3a5f !important;
}
</style>
